<template>
  <div class="team-list">
    <van-search
        v-model="searchText"
        placeholder="请输入队伍名"
        wrap-with-form
        show-action
        @search="onSearch"
        @cancel="onCancel"
    />
  </div>
  <team-list-card :team-list=teamList></team-list-card>
  <van-empty description="内容为空" v-if="teamList == null|| !teamList"></van-empty>
</template>

<script setup lang="ts">
import TeamListCard from "../../components/TeamListCard.vue";
import {ref, onMounted} from "vue";
import 'vant/lib/index.css';
import {showToast} from "vant";
import {getTeamCurrentJoinList, getTeamList} from "../../api/Team.ts";

const teamList = ref([]);
// 用户输入的搜索框内容
const searchText = ref('');

// 钩子函数
onMounted(() => {
  searchTeamList('');
});

// 定义公用的查询列表函数
const searchTeamList = async (val = '') => {
  const teamListResult = await getTeamCurrentJoinList(val);
  // @ts-ignore
  if (teamListResult?.code === 0 && teamListResult.data) {
    teamList.value = teamListResult.data;
  } else {
    showToast("加载失败");
  }
};

// 搜索框点击搜索按钮
const onSearch = () => {
  searchTeamList(searchText.value);
};
// 搜索框点击取消按钮
const onCancel = () => {
  searchText.value = '';
};


</script>

<style scoped>

</style>